<template>
	<view>
		<cf-empty v-show="cars==null" @click="toOther"></cf-empty>
		<view v-show="cars!=null" @click="clearCar" class="clear">
			<text>清空购物车</text>
		</view>
		<view class="uni-list">
			<uni-swipe-action>
				<checkbox-group @change="checkboxChange">
					<uni-swipe-action-item v-for="(item,index) in cars" :key="item.id" :right-options="actions"
						:show="'none'" :auto-close="true" @click="actionClick($event,item.id,index)">
						<view class="content-box">
							<label class="uni-list-cell uni-list-cell-pd">
								<view>
									<checkbox class="mycheck" :value="String(item.id)"
										:checked="checkedCars.includes(String(item.id))" />
								</view>
								<view class="right" @click.stop="goodsDetail(item.id)">
									<view class="img">
										<image :src="item.picture" mode=""></image>
									</view>
									<view class="rightg">
										<view class="title">
											{{item.name}}
										</view>
										<view class="spec">
											数量：{{item.num}}
										</view>
										<view class="price">
											<view class="">
												￥{{Number(item.price*item.num)}}
											</view>
											<view class="" @click.stop="">
												<!-- <u-number-box v-model="item.num" @change="changeValue($event,item.id)"></u-number-box> -->
												<uni-number-box :min="min" :max="max" :value="item.num"
													@change="changeValue($event,item.id,item.price)" />
											</view>
										</view>
									</view>
								</view>
							</label>
						</view>
					</uni-swipe-action-item>
				</checkbox-group>
			</uni-swipe-action>
		</view>
		<view class="bottom">
			<view class="sel">
				<checkbox-group @change="allChoose">
					<label class="uni-list-cell uni-list-cell-pd">
						<view>
							<checkbox class="mycheck" :value="'all'" :disabled="Number(cars.length)==0?true:false"
								:checked="checked" />
						</view>
						<view>全选</view>
					</label>
				</checkbox-group>

			</view>
			<view class="sum">
				<label>合计：</label><label>￥{{totalPrice}}</label>
			</view>
			<view class="butt" @click="addOrder">
				<button type="warn"
					:disabled="Number(checkedCars.length)==0?true:false">结算({{checkedCars.length}})</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'cf-car',
		//详情，提交订单，清空购物车，删除商品，逛逛地址
		emits: ['click', 'addOrder', 'clearCar', 'delCar', 'toOther', 'toDetail'],
		props: {
			//数据列表
			list: {
				type: Array,
				default: () => []
			},
			min: {
				type: Number,
				default: 1
			},
			max: {
				type: Number,
				default: 100
			}

		},
		watch: {
			list: {
				//新值旧值
				handler(nv, ov) {
					this.cars = nv;
					this.getTotal()
				},
				deep: false, //为了发现对象内部值(所有data中的值)的变化
				immediate: true, //初始化绑定时就会执行handler方法
			}
		},
		data() {
			return {
				cars: [],
				checked: false,
				checkedCars: [],
				totalPrice: 0.00,
				actions: [{
					text: '删除',
					style: {
						backgroundColor: '#007aff'
					}
				}],
			}
		},
		methods: {
			//详情
			goodsDetail(id) {
				this.$emit('toDetail', id)
			},
			//空数据跳转
			toOther() {
				this.$emit('toOther')
			},
			//提交订单
			addOrder() {
				let checkGoods = this.cars.filter((item) => item.checked == true);
				if (this.checkedCars.length <= 0 || checkGoods <= 0) {
					uni.showToast({
						title: "请选中需要结算的商品！"
					})
					return;
				} else {
					this.$emit('addOrder', checkGoods)
				}
			},
			//计算购物车选中的商品总价-购物车选中数量
			getTotal() {
				var items = this.cars,
					values = this.checkedCars;
				this.totalPrice = 0.00;
				uni.setTabBarBadge({
					index: 2,
					text: String(items.length)
				})
				for (var i = 0, lenI = items.length; i < lenI; ++i) {
					const item = items[i]
					if (values.includes(String(item.id))) {
						this.$set(item, 'checked', true)
						this.totalPrice = (Number(this.totalPrice) + Number(item.price * item.num)).toFixed(2)
					} else {
						this.$set(item, 'checked', false)
					}
				}
				// 如果选择的数组中有值，并且长度等于列表的长度，就是全选
				if (this.checkedCars.length > 0 && this.checkedCars.length == items.length) {
					this.checked = true;
				} else {
					this.checked = false;
				}
			},
			//多选改变事件
			checkboxChange: function(e) {
				var items = this.cars,
					values = e.detail.value;
				this.checkedCars = values;
				this.getTotal()
			},
			//商品数字改变事件--修改了原组件中非数字处理 _onBlur方法中的if (isNaN(value)) 
			changeValue(value, carId,price) {
				console.log('返回数值：', value);
				console.log('返回id：', carId);
				this.cars.forEach(item => {
					if (item.id == carId) {
						// let add = value - item.num
						this.apis.editCar({
							id: carId,
							num: value,
							price: price
						})
						item.num = value;
					}
				})
				this.getTotal()
			},

			// 全选事件
			allChoose(e) {
				let chooseItem = e.detail.value;
				// 全选
				if (chooseItem[0] == 'all') {
					for (let item of this.cars) {
						let itemVal = String(item.id);
						if (!this.checkedCars.includes(itemVal)) {
							this.checkedCars.push(itemVal);
						}
					}
				} else {
					// 取消全选
					this.checkedCars = [];
				}
				this.getTotal()
			},
			//滑动工具 点击事件-当前只有删除功能
			actionClick(e, goodsId, index) {
				this.$emit('delCar', goodsId)
				this.checkedCars = this.checkedCars.filter(item => item != goodsId)
				this.cars = this.cars.filter(item => item.id != goodsId)
				this.getTotal();
			},
			/**
			 * 清空之后，记得调用that.$refs.car.clearCarLocal()清除本地数据
			 */
			clearCar() {
				let that = this
				uni.showModal({
					content: "是否确认清空购物车",
					success: function(res) {
						if (res.confirm) {
							that.$emit('clearCar')
							that.clearCarLocal() //如果需要严谨执行，可注释此行并在父组件方法中自行调用
							//调用数据库
							that.apis.clearCar()
						} else if (res.cancel) {}
					}
				})

			},
			clearCarLocal() {
				this.cars = []
				this.checkedCars = []
				this.getTotal();
			}

		}
	}
</script>

<style lang="scss">
	.uni-list-cell {
		display: flex;
		font-size: 16px;
		position: relative;
		justify-content: flex-start;
		align-items: center;
		background-color: #fff;
		flex-direction: row;
	}

	.uni-list-cell-pd {
		padding: 11px 15px;
	}



	.uni-list {
		display: flex;
		background-color: #ffffff;
		position: relative;
		flex-direction: column;
		margin-bottom: 50px;

		.uni-list-cell::after {
			position: absolute;
			z-index: 3;
			right: 0;
			bottom: 0;
			left: 15px;
			height: 1px;
			content: "";
			-webkit-transform: scaleY(.5);
			transform: scaleY(.5);
			background-color: #c8c7cc;
		}
	}

	.img {
		flex: 1;

		image {
			width: 100px;
			height: 84px;
			margin-right: 5px;
		}
	}

	.right {
		display: flex;
		flex-direction: row;
		width: 100%;
	}

	.rightg {
		flex: 2;
		display: flex;
		flex-direction: column;
		padding-left: 5px;
	}

	.title {
		overflow: hidden;
		height: 20px;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
	}

	.spec {
		margin: 7px 0px;
		color: #c8c7cc;
	}

	.price {
		font-size: 18px;
		color: #EC0D0D;
		display: flex;
		justify-content: space-between;
	}

	.bottom {
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: fixed;
		bottom: 0px;
		width: 98%;
		background-color: #ffffff !important;
		z-index: 100000;
	}

	.sel {
		color: #7c7b7e;
	}

	.sum {
		color: #EC0D0D;
		font-size: 18px;
		font-weight: 700;
	}

	.butt button {
		border-radius: 20px;
		line-height: 33px;
	}

	.clear {
		display: flex;
		justify-content: flex-end;
		margin: 10px;
		color: #FF5722;
		font-size: 16px;
	}
</style>
